<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SSE Example</title>
</head>
<body>
  <h1>Server-Sent Events Example</h1>
  <ul id="messages"></ul>

  <script>
    const eventSource = new EventSource('/sse/index');

    eventSource.onmessage = function(event) {
      console.log('onmessage', event)
      const message = JSON.parse(event.data);
      const listItem = document.createElement('li');
      listItem.textContent = message.message;
      document.getElementById('messages').appendChild(listItem);
    };

    eventSource.addEventListener('update', function(event) {
      console.log('update', event)
      const message = JSON.parse(event.data);
      const listItem = document.createElement('li');
      listItem.textContent = `Update: ${message.message}`;
      document.getElementById('messages').appendChild(listItem);
    });

    eventSource.onerror = function(error) {
      console.error('EventSource failed:', error);
    };
  </script>
</body>
</html>